<!--此页面编写者：@3188066816-->
<template>
    <div class="login_view">
        <div class="login">
            <h2 id="title">用户登录</h2>
            <hr>
            <div class="login_input_div">
                <span class="login_text">账号:</span>
                <el-input class="number_in" size="large" v-model="input_number" style="width: 240px" placeholder="请输入账号" />
            </div>
            <div class="login_input_div">
                <span class="login_text">密码:</span>
                <el-input class="password_in" size="large" v-model="input_password" style="width: 240px" type="password" placeholder="请输入密码" show-password/>
            </div>
            <el-radio-group v-model="radio1" class="login_radio_group">
                <el-radio value="admin" size="large" border>管理员</el-radio>
                <el-radio value="looker" size="large" border>观察员</el-radio>
            </el-radio-group>
            <div class="login_b_div">
                <el-button @click="login_b()" id="login_b" type="primary">登录</el-button>
            </div>
            <el-link @click="to_regis()" id="login_link1" type="success">没有账户？点击注册</el-link>
        </div>
        <a href="https://beian.miit.gov.cn/" target="_blank" class="beian" >这之后写备案号</a>
    </div>
</template>
<script>
import LoginApi from '@/api/LoginApi';
import CryptoJS from 'crypto-js'
    export default{
        data(){
            return{
                input_number:"",
                input_password:"",
                radio1:"manger",
            }
        },
        methods:{
            //写async和下面的await是为了处理异步问题。因为调用的函数在另外的文件里，响应和头是分开的。
            async login_b(){
                //判断必要信息是否空
                if(!this.input_number || !this.input_password){
                    this.$message({
                        message: '请填写完整信息！',
                        type: 'warning',
                });
                return;
            }
                //调用登录函数
                try{
                        //哈希密码加密
                        const pass_hash = CryptoJS.SHA256(this.input_password).toString();
                        const result=await LoginApi.login_post(this.input_number,pass_hash,this.radio1);
                        if(result.data.status==1001){
                            //登录成功。先改store里面的登录状态。
                            this.$store.commit('setIsLogin',1);
                            this.$store.commit('setUserInfo', {  // 正确调用 mutation
                                userNumber: this.input_number,
                                userType: this.radio1
                            });
                            this.$router.push('/home');
                            this.$message({
                                message:'登录成功！欢迎'+this.input_number,
                                type:'success',
                            })
                        }
                        else if(result.data.status==1002){
                            this.$message({
                                message:'登录密码错误',
                                type:'warning',
                            })
                            return;
                        }
                        else if(result.data.status==1003){
                            this.$message({
                                message:'该账户不存在',
                                type:'warning',
                            })
                            return;
                        }
                        else{
                            this.$message({
                                message:'信息错误',
                                type:'warning',
                            })
                            return;
                        }
                    }catch(error) {
                        this.$message.error('请求失败：' + error.message);
                }
            },
            to_regis(){
                //跳转到注册
                this.$router.push('/regis');
            },
        }
    }
</script>
<style lang="css" scoped src="../styles/login.css">
</style>
